<template>
  <div class='bzGoods'>
    <div class='header'>
      <div v-if='UserTag'>
        <div class='left-nt'
             v-if='UserTag.title'>
          <div>客户卡号：{{UserTag.title.KH_bianHao}}</div>
          <div>
            客户类型：{{UserTag.title.KHLeiXing}}
          </div>
        </div>
        <div class='right-search'>
          <input type="text"
                 placeholder="搜索"
                 placeholder-class="placeholder"
                 v-model='searchVal' />
          <div class='btn'
               @click='handleSearch'>
            <i class='iconfont icon-sousuo'></i>
          </div>
        </div>
      </div>
    </div>
    <div class='body'>
      <scroll-view :style='{"height":windowInfo.windowHeight+"px","width":"300rpx"}'
                   scroll-y
                   scroll-with-animation>
        <ul class='classType'
            :style='{"minHeight":windowInfo.windowHeight+"px"}'>
          <li v-for='(item,index) in classList'
              @click='qieClass(item)'
              :key='index'
              :class='[item===active?"active":""]'> {{item}}</li>
          <div :class="[store.isIphoneX?'iphoneX-fixed-bottom':'']"></div>
        </ul>
      </scroll-view>
      <scroll-view :style='{"height":windowInfo.windowHeight+"px"}'
                   scroll-y
                   scroll-with-animation>
        <ul class='goods-list'>
          <li v-for='item in GoodsList'
              :key='item'>
            <div class='goods-img'>
              <img :src="item.Pic"
                   mode='widthFix'
                   alt="">
            </div>
            <div class='goods-info'>
              <div class='name'>{{item.SPMingCheng}}</div>
              <div class='name'>{{item.SPJianCheng}}</div>
              <div class='price'>
                ￥{{item.SP_price}}
              </div>
              <div class='addShopCart'
                   @click='addShopping(item)'>
                <div>
                  <i class='iconfont icon-shopping_ico_cart3'></i>
                  <span v-if='item.number'>{{item.number}}</span>
                </div>
              </div>
            </div>
          </li>
          <div :class="[store.isIphoneX?'iphoneX-fixed-bottom':'']"></div>
        </ul>
      </scroll-view>
    </div>
    <div class='footer'
         :class="[store.isIphoneX?'iphoneX-fixed-bottom':'']">
      <div>
        <div class='next'
             :class='[isDisable?"gray":""]'
             @click='goShoppingCat'>
          选择订购
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { BiaoZhunShangPin, SpShuXing } from '@/api/api.js'
export default {
  data () {
    return {
      shuXing: {
        type: String,
        default: ''
      },
      searchVal: '',
      typeId: {
        type: Number,
        default: 0
      },
      windowInfo: {
        type: Object,
        default: {}
      },
      active: '',
      isDisable: true,
      inShopping: null,
      classList: [],
      GoodsList: [],
      UserTag: null
    }
  },
  watch: {
    shuXing () {
      this.getListdata()
    }
  },
  computed: {
    store () {
      return this.$store.state
    }

  },
  async  mounted () {
    this.UserTag = this.$wx.getStore('shoppingCart')[0] || ''

    this.shuXing = null
    this.classList = []
    this.GoodsList = []
    this.typeId = this.$root.$mp.query.typeId
    this.inShopping = this.$root.$mp.query.inShopping
    this.getWindowInfo()
    await this.getClass()
  },
  methods: {
    getWindowInfo () {
      let _that = this
      wx.getSystemInfo({
        success: function (res) {
          _that.windowInfo = res
        }
      })
    },
    getListdata () {
      BiaoZhunShangPin({
        KHTypeID: this.typeId,
        SPName: this.searchVal,
        SPShuXing: this.shuXing,
        KH_ID: this.UserTag.title.KH_ID
      }).then(res => {
        this.GoodsList = res
        this.goodsNumber()
      })
    },
    getClass () {
      SpShuXing().then(res => {
        res.push('全部')
        this.classList = res
        this.shuXing = res[0]
        this.active = res[0]
      })
    },
    handleSearch () {
      this.shuXing = ''
      this.getListdata()
    },
    qieClass (item) {
      if (item === '全部') {
        this.shuXing = ''
      } else {
        this.shuXing = item
      }
      this.active = item
    }, // 添加购物车
    addShopping (item) {
      let bzGoods = this.$wx.getStore('bzGoods') || []
      for (let key of bzGoods) {
        if (key.HuoHao === item.HuoHao && key.SP_ID === item.SP_ID) {
          return this.$wx.textToast('商品已加入购物车')
        }
      }
      item.number = 1
      item.isSelect = true
      bzGoods.push(item)
      this.$wx.getStore('bzGoods', bzGoods)
      this.goodsNumber()
    },
    goodsNumber () {
      let bzGoods = this.$wx.getStore('bzGoods')
      let GoodsList = this.GoodsList
      this.isDisable = true
      for (let key of bzGoods) {
        for (let keys of GoodsList) {
          if (key.HuoHao === keys.HuoHao && key.SP_ID === keys.SP_ID) {
            keys.number = 1
            console.log(1122)

            this.isDisable = false
          }
        }
      }
      this.GoodsList = Object.assign([], GoodsList)
    },
    goShoppingCat () {
      if (this.isDisable) { return }
      if (this.inShopping) {
        this.$wx.navigator(-1)
      } else {
        this.$wx.navigator('/pages/chooseAnOffer/listOfGoods')
      }
    }

  }
}
</script>
<style lang="scss">
@import '@/common/scss/base.scss';
$scroll-margin-top: 112px;
$scroll-margin-bottom: 97px;
.bzGoods {
  background: #fff;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 12;
    width: 100%;
    box-sizing: border-box;
    > div {
      @include border-bottom;
      @include fjc(space-between);
      padding: 24px;
      .left-nt {
        > div {
          @include fontSize(24);
          @include color666;
        }
      }
      .right-search {
        position: relative;
        input {
          width: 420px;
          height: 64px;
          border-radius: 30px;
          border: 1px solid $lineColor;
          box-sizing: border-box;
          padding: 0 24px;
          @include fontSize(28);
        }
        .btn {
          position: absolute;
          right: 0;
          top: 50%;
          z-index: 10;
          transform: translate(0, -50%);
          height: 100%;
          @include fjc(center);
          padding: 0 30px;
          i {
            font-size: 30px;
            color: #666;
          }
        }
      }
    }
  }
  .body {
    display: flex;
    .classType {
      width: 100%;
      padding-top: $scroll-margin-top;
      padding-bottom: $scroll-margin-bottom;
      @include border-right;
      box-sizing: border-box;
      li {
        height: 98px;
        @include color111;
        @include fjc(center);

        @include fontSize(28);
        box-sizing: border-box;
        padding: 0 20px;
      }
      .active {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
          display: block;
          height: 98px;
          width: 10px;
          background: $primaryColor;
        }
      }
    }
    .goods-list {
      padding-top: $scroll-margin-top;
      padding-bottom: $scroll-margin-bottom;
      li {
        display: flex;
        padding: 24px 0;
        @include border-bottom;
        .goods-img {
          width: 230px;
          @include fjc(center);
          img {
            width: 200px;
            height: 200px;
          }
        }
        .goods-info {
          flex: 1;
          display: flex;
          flex-flow: column wrap;
          position: relative;
          justify-content: space-between;
          .name {
            @include fontSize(28);
            @include color111;
          }
          .price {
            @include fontSize(28);
            font-weight: 600;
            color: $red;
          }
          .addShopCart {
            position: absolute;
            right: 24px;
            bottom: -10px;
            > div {
              position: relative;
              i {
                color: $primaryColor;
                font-size: 76px;
              }
              span {
                position: absolute;
                top: -10px;
                right: -10px;
                height: 40px;
                width: 40px;
                background: #f01414;
                color: #fff;
                border-radius: 100%;
                font-size: 24px;
                box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.4);
                @include fjc(center);
              }
            }
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 12;
    background: #fff;
    > div {
      @include border-top;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      .next {
        @include fjc(center);
        width: 230px;
        height: 98px;
        background: $primaryColor;
        color: #fff;
        font-size: 28px;
      }
      .gray {
        background: #ddd;
      }
    }
  }
}
</style>
